import { ArrowRightOutlined } from '@ant-design/icons';
import { Skeleton } from 'antd';

import { Tooltip, Button } from '@/components/eai-design';
import { SvgIcon } from '@/components/icon';
import NotData from '@/components/NotData';
import { useOrchestrationStore } from '@/store/orchestrationStore';
import { LineChartDataItem } from '@/types/know/know';

import UserDislikeChart from '../components/UserDislikeChart';

interface FeedbackProps {
  feedbackData: {
    feedbackCount: number;
    percent: number | '-';
    isRise: boolean;
    data: LineChartDataItem[];
    solvedNum: number;
    unsolvedNum: number;
    solvedPercent: number | '-';
    unsolvedPercent: number | '-';
    isSolvedRise: boolean;
    isUnsolvedRise: boolean;
  };
  statisticsLoading: boolean;
  tooltipMap: Record<string, string>;
  activeRange: string;
  onShowDetail: () => void;
}
type DislikeKey = 'total' | 'processed' | 'unprocessed' | string;

function getItemIcon(key: DislikeKey): string {
  switch (key) {
    case 'total':
      return 'report-is-total';
    case 'processed':
      return 'report-is-processed';
    case 'unprocessed':
      return 'report-is-unprocessed';
    default:
      return '';
  }
}

function getCountValue(key: DislikeKey, feedbackData: FeedbackProps['feedbackData']): number {
  switch (key) {
    case 'total':
      return feedbackData.feedbackCount;
    case 'processed':
      return feedbackData.solvedNum;
    case 'unprocessed':
      return feedbackData.unsolvedNum;
    default:
      return 0;
  }
}

function getRangeLabel(range: string): string {
  if (range === '7days') return ' 周';
  if (range === '30days') return '月';
  return '';
}

function getRiseClass(key: DislikeKey, feedbackData: FeedbackProps['feedbackData']): string {
  let raw: number | '-';
  let isRiseFlag = false;

  if (key === 'total') {
    raw = feedbackData.percent;
    isRiseFlag = feedbackData.isRise;
  } else if (key === 'processed') {
    raw = feedbackData.solvedPercent;
    isRiseFlag = feedbackData.isSolvedRise;
  } else if (key === 'unprocessed') {
    raw = feedbackData.unsolvedPercent;
    isRiseFlag = feedbackData.isUnsolvedRise;
  } else {
    return '';
  }

  if (raw === '-' || raw === 0) return '';
  return isRiseFlag ? 'text-success' : 'text-error';
}

function getPercentText(key: DislikeKey, feedbackData: FeedbackProps['feedbackData']): string {
  let raw: number | '-';
  let isRiseFlag = false;

  if (key === 'total') {
    raw = feedbackData.percent;
    isRiseFlag = feedbackData.isRise;
  } else if (key === 'processed') {
    raw = feedbackData.solvedPercent;
    isRiseFlag = feedbackData.isSolvedRise;
  } else if (key === 'unprocessed') {
    raw = feedbackData.unsolvedPercent;
    isRiseFlag = feedbackData.isUnsolvedRise;
  } else {
    return '';
  }

  if (raw === '-') return '-';
  const sign = raw !== 0 && isRiseFlag ? '+' : '-';
  const p = (raw * 100).toFixed(2);
  const percentStr = p.endsWith('.00') ? `${parseInt(p, 10)}%` : `${p}%`;
  return `${sign}${percentStr}`;
}

function getTrendIcon(key: DislikeKey, feedbackData: FeedbackProps['feedbackData']): string {
  let raw: number | '-';
  let isRiseFlag = false;

  if (key === 'total') {
    raw = feedbackData.percent;
    isRiseFlag = feedbackData.isRise;
  } else if (key === 'processed') {
    raw = feedbackData.solvedPercent;
    isRiseFlag = feedbackData.isSolvedRise;
  } else if (key === 'unprocessed') {
    raw = feedbackData.unsolvedPercent;
    isRiseFlag = feedbackData.isUnsolvedRise;
  } else {
    return '';
  }

  if (raw === '-' || raw === 0) return '';
  return isRiseFlag ? 'report-is-top ' : 'report-is-bottom';
}

const Feedback = ({
  feedbackData,
  statisticsLoading,
  tooltipMap,
  activeRange,
  onShowDetail,
}: FeedbackProps) => {
  const { userDislikeList } = useOrchestrationStore();

  return (
    <div
      className="w-1/3 rounded-default p-4 "
      style={{ backgroundColor: '#fff', position: 'relative', zIndex: 1, minWidth: '500px' }}
    >
      <div className="flex h-[40px] items-center justify-between  ">
        <div className="flex items-center text-xl font-semibold">
          <div className="mr-2 h-3 w-3  rounded-full border-[3px] border-[#1B6DFA]" />
          用户点踩问题数
          <Tooltip title={tooltipMap.usersQuestions}>
            <div className="flex">
              <SvgIcon size={16} icon="report-is1" className="ml-1" />
            </div>
          </Tooltip>
        </div>
        {feedbackData.percent !== 0 && (
          <Button type="text" onClick={onShowDetail}>
            详情
            <ArrowRightOutlined />
          </Button>
        )}
      </div>
      {feedbackData.percent !== 0 && (
        <div className="mt-2 flex items-center justify-between gap-4">
          {userDislikeList.map((item: any, index: number) => {
            const key = item.key as DislikeKey;
            const itemIcon = getItemIcon(key);
            const countValue = getCountValue(key, feedbackData);
            const riseClass = getRiseClass(key, feedbackData);
            const percentText = getPercentText(key, feedbackData);
            const trendIcon = getTrendIcon(key, feedbackData);
            const rangeLabel = getRangeLabel(activeRange);

            return (
              <div
                className="h-[98px] w-1/3  rounded-md bg-fill-1 p-4 py-2 text-text-4"
                key={index}
              >
                <div className="flex items-center text-sm ">
                  <SvgIcon size={16} icon={itemIcon} className="mr-1" />
                  {item.title}
                </div>
                <div className=" flex items-center justify-between gap-4">
                  <div className="  w-full rounded-md  text-text-4 ">
                    <div className="my-1">
                      <span className="mr-1 text-2xl font-extrabold text-text-5">{countValue}</span>
                    </div>
                    <div className="flex  items-center">
                      <span className="whitespace-nowrap text-sm text-text-4">
                        {rangeLabel}
                        环比
                        <span className={` px-1 ${riseClass} `}>{percentText}</span>
                      </span>
                      <SvgIcon size={16} icon={trendIcon} />
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
      <div className="mt-2">
        {statisticsLoading ? (
          <Skeleton active paragraph={{ rows: 5 }} style={{ padding: '10px' }} />
        ) : (
          <div className="h-[220px] overflow-hidden">
            {feedbackData.percent !== 0 ? (
              <UserDislikeChart data={feedbackData.data} height={180} />
            ) : (
              <div className="">
                <NotData />
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};
export default Feedback;
